<template>
  <div
    class="overlay"
    @tap="emits('closeConversationActionMenu')"
    @click="emits('closeConversationActionMenu')"
  >
    <div
      id="conversation-actions-menu"
      ref="actionsMenuDomRef"
      :class="[
        isPC && 'isPC',
        'actionsMenu',
        !isHiddenActionsMenu && 'cancelHidden',
      ]"
      :style="{ top: `${_actionsMenuPosition.top}px` }"
    >
      <div
        :class="['actionsMenuItem']"
        @click.stop="handleItem({ name: CONV_OPERATION.DELETE })"
      >
        {{ TUITranslateService.t("TUIConversation.删除会话") }}
      </div>
      <div
        v-if="!props.selectedConversation.isPinned"
        :class="['actionsMenuItem']"
        @click.stop="handleItem({ name: CONV_OPERATION.ISPINNED })"
      >
        {{ TUITranslateService.t("TUIConversation.置顶会话") }}
      </div>
      <div
        :class="['actionsMenuItem']"
        v-if="props.selectedConversation.isPinned"
        @click.stop="handleItem({ name: CONV_OPERATION.DISPINNED })"
      >
        {{ TUITranslateService.t("TUIConversation.取消置顶") }}
      </div>
      <div
        :class="['actionsMenuItem']"
        v-if="!props.selectedConversation.isMuted"
        @click.stop="handleItem({ name: CONV_OPERATION.MUTE })"
      >
        {{ TUITranslateService.t("TUIConversation.消息免打扰") }}
      </div>
      <div
        :class="['actionsMenuItem']"
        v-if="props.selectedConversation.isMuted"
        @click.stop="handleItem({ name: CONV_OPERATION.NOTMUTE })"
      >
        {{ TUITranslateService.t("TUIConversation.取消免打扰") }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  nextTick,
  onMounted,
  getCurrentInstance
} from "../../../adapter-vue";
import {
  TUIStore,
  TUIGlobal,
  TUITranslateService,
} from "@tencentcloud/chat-uikit-engine";
import { CONV_OPERATION } from "../../../constant";
import { isUniFrameWork } from "../../../utils/is-uni";

const emits = defineEmits(["closeConversationActionMenu"]);
const props = defineProps([
  "actionsMenuPosition",
  "selectedConversation",
  "selectedConversationDomRect",
]);

const thisInstance = getCurrentInstance()?.proxy || getCurrentInstance();
const isPC = TUIGlobal.getPlatform() === "pc";
const actionsMenuDomRef = ref<HTMLElement | null>();
const isHiddenActionsMenu = ref(true);
const currentConversation = TUIStore.getConversationModel(
  props.selectedConversation?.conversationID
);
console.log(props.selectedConversation?.conversationID,1231233)
const _actionsMenuPosition = ref<{
  top: number;
  left?: number;
  conversationHeight?: number;
}>(props.actionsMenuPosition);


onMounted(() => {
  checkExceedBounds();
});

function checkExceedBounds() {
  // 组件初始渲染时，执行并自检边界有没有超出屏幕，在nextTick中处理。
  nextTick(() => {
    if (isUniFrameWork) {
      // 处理UniFrameWork菜单低于屏幕的情况
      const query = uni.createSelectorQuery().in(thisInstance);
      query
        .select(`#conversation-actions-menu`)
        .boundingClientRect((data) => {
          if (data) {
            if (data.bottom > TUIGlobal?.global?.getWindowInfo?.().windowHeight) {
              _actionsMenuPosition.value = {
                ...props.actionsMenuPosition,
                top:
                  props.actionsMenuPosition.top -
                  props.actionsMenuPosition.conversationHeight -
                  data.height,
              };
            }
          }
          isHiddenActionsMenu.value = false;
        })
        .exec();
    } else {
      // 处理原生Vue菜单低于屏幕的情况
      const rect = actionsMenuDomRef.value?.getBoundingClientRect();
      // PC端根据鼠标点击的位置设置actionsMenu的位置，否则使用默认值167px
      if (isPC && typeof props.actionsMenuPosition.left !== 'undefined') {
        actionsMenuDomRef.value?.style.setProperty("left", `${props.actionsMenuPosition.left}px`);
      }
      if (rect && rect.bottom > window.innerHeight) {
        _actionsMenuPosition.value.top =
          props.actionsMenuPosition.top -
          props.actionsMenuPosition.conversationHeight -
          rect.height;
      }
      isHiddenActionsMenu.value = false;
    }
  });
}

import * as Api from '@/common/Api.js'
const handleItem = (params: { name: string }) => {
  const { name } = params;
  const conversationModel = currentConversation;
  if (!name || !conversationModel || !conversationModel.conversationID) {
    return;
  }
  
  console.log(conversationModel);
  Api.default.request('user/saveFriendRole', {
  	id: conversationModel.userProfile.userID,
  	isPinned: conversationModel.isPinned ? 0 : 1,
  	isMuted: conversationModel.isMuted ? 0 : 1
  }).then((res) => {
  	if (res.code == 1) {
  	}
  })
  
  switch (name) {
    case CONV_OPERATION.DELETE:
      conversationModel?.deleteConversation();
      break;
    case CONV_OPERATION.ISPINNED:
      conversationModel?.pinConversation();
      break;
    case CONV_OPERATION.DISPINNED:
      conversationModel?.pinConversation();
      break;
    case CONV_OPERATION.MUTE:
      conversationModel?.muteConversation();
      break;
    case CONV_OPERATION.NOTMUTE:
      conversationModel?.muteConversation();
      break;
  }
  emits("closeConversationActionMenu");
};
</script>

<style scoped lang="scss">
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0);
  z-index: 9999;
}

.cancelHidden {
  opacity: 1 !important;
}

.actionsMenu {
  position: absolute;
  left: 164px;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 -4px 12px 0 rgba(0, 0, 0, 0.06);
  background-color: #4B4C4E;
  // overflow: hidden;
  opacity: 0;
  
  &:before{
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	top: -8px;
	left: 50%;
	transform: translateX(-50%);
	border-right: solid 8px transparent;
	border-left: solid 8px transparent;
	border-bottom: solid 8px #4B4C4E;
  }

  .actionsMenuItem {
    padding: 7px 20px;
    font-size: 12px;
	color: #fff;
  }

  &.isPC .actionsMenuItem:hover {
    background-color: #eee;
  }
}
</style>
